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About 


You can share this PDF with anyone you feel could benefit from it, downloaded the latest version 
from: vue-js 


It is an unofficial and free Vue.js ebook created for educational purposes. All the content is 
extracted from Stack Overflow Documentation, which is written by many hardworking individuals at 
Stack Overflow. It is neither affiliated with Stack Overflow nor official Vue.js. 


The content is released under Creative Commons BY-SA, and the list of contributors to each 
chapter are provided in the credits section at the end of this book. Images may be copyright of 
their respective owners unless otherwise specified. All trademarks and registered trademarks are 
the property of their respective company owners. 


Use the content presented in this book at your own risk; it is not guaranteed to be correct nor 
accurate, please send your feedback and corrections to info@zzzprojects.com 
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Chapter 1: Getting started with Vue.js 


Remarks 


Vue.js isa rapidly growing front-end framework for JavaScript, inspired by Angular.js, Reactive.js, 
and rivets. js that offers simplistic user-interface design, manipulation, and deep reactivity. 


It is described as a mvv patterned framework, model-view View-Model, which is based on the 
concept of two-way binding data to components and views. It is incredibly fast, exceeding speeds 
of other top-tier ss frameworks, and very user friendly for easy integration and prototyping. 


Versions 


Version | Release Date 


2.4.1 2017-07-13 
2.3.4 2017-06-08 
2.3.3 2017-05-09 
2.2.6 2017-03-26 
2.0.0 2016-10-02 
1.0.26 2016-06-28 
1.0.0 2015-10-26 
0.12.0 2015-06-12 


0.11.0 2014-11-06 


Examples 


"Hello, World!" Program 


To start using Vue.js, make sure you have the script file included in your HTML. For example, add 
the following to your HTML. 


<script src="https://npmcdn.com/vue/dist/vue.js"></script> 
Simple Example 
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HTML template 


<div id="app"> 
{{ message }} 


</div> 
JavaScript 
new Vue ({ 
el: ‘#app', 
data: { 
message: 'Hello Vue.js!' 


} 
}) 


See a live demo of this example. 


You might also want to check out the "Hello World" example made by Vue.js. 
Hello World in Vue 2 (The JSX way) 


JSX is not meant to be interpreted by the browser. It must be first transpiled into standard 
Javascript. To use JSX you need to install the plugin for babel babe1-plugin-t rans form-vue-JSx 


Run the Command below: 


npm install babel-plugin-syntax—jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merg 
props -——-save-dev 


and add it to your .babeirc like this: 


"presets": ["es2015"], 
Uevilorejatingye || Vhcieeinsiro@im—woles— JS" || 


Sample code with VUE JSX: 


import Vue from 'vue' 
import App from './App.vue' 


new Vue ({ 

el: '#app', 

methods: { 
handleClick () { 

alert ('Hello!') 

} 

}, 

render (h) { 
return ( 
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<div> 
<hl on-click={this.handleClick}>Hello from JSX</h1> 
<p> Hello World </p> 
</div> 
) 
} 
}) 


By using JSX you can write concise HTML/XML-like structures in the same file as you write 
JavaScript code. 


Congratulations, You're Done :) 
Handling User Input 


VueJS can be used to easily handle user input as well, and the two way binding using v-model 
makes it really easy to change data easily. 


HTML : 


<script src="https://unpkg.com/vue/dist/vue. js"></script> 
<div id="app"> 
{ {message} } 


<input v-model="message"> 
</div> 


JS: 


new Vue ({ 
el: ‘'#app', 
data: { 
message: 'Hello Vue.js!' 
} 
}) 


It is very easy to do a two-way binding in VueJS using v-mode1 directive. 
Check out a live example here. 


Read Getting started with Vue.js online: https://riptutorial.com/vue-js/topic/1057/getting-started- 
with-vue-js 
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Chapter 2: Components 


Remarks 


In Component(s): 


props is an array of string literals or object references used to pass data from parent component. 
It can also be in object form when it is desired to have more fine grained control like specifying 
default values, type of data accepted, whether it is required or optional 


data has to be a function which returns an object instead of a plain object. It is so because we 
require each instance of the component to have its own data for re-usability purpose. 


events is an object containing listeners for events to which the component can respond by 
behavioral change 


methods object containing functions defining the behavior associated with the component 


computed properties are just like watchers or observables, whenever any dependency changes 
the properties are recalculated automatically and changes are reflected in DOM instantly if DOM 
uses any computed properties 


ready is a Vue instance's life-cycle hook 
Examples 


Component scoped (not global) 


Demo 


HTML 


<script type="x-template" id="form-template"> 
<label>{{inputLabel}} :</label> 
<input type="text" v-model="name" /> 
</ S@iealjoie > 


<div id="app"> 

<h2>{{appName} }</h2> 

<form-component title="This is a form" v—bind:name="userName"></form—component> 
</div> 


JS 


// Describe the form component 
// Note: props is an array of attribute your component can take in entry. 
// Note: With props you can pass static data('title') or dynamic data('userName'). 
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// Note: When modifying 'name' property, you won't modify the parent variable, it is only 
descendent. 
// Note: On a component, 'data' has to be a function that returns the data. 
var formComponent = { 

template: '#form-template', 

jrmscoss [| Viedcle’, Vinee’ ||; 

data: function() { 

return { 
inputLabel: 'Name' 


} 
hi 


// This vue has a private component, it is only available on its scope. 


// Note: It would work the same if the vue was a component. 
// Note: You can build a tree of components, but you have to start the root with a 'new 


Vue()'. 
var vue = new Vue({ 
el Stapp, 
data: { 
appName: 'Component Demo', 
userName: 'John Doe' 
}, 
components: { 
"form-—component': formComponent 


} 
}); 


What are components and how to define components? 


Components in Vue are like widgets. They allow us to write reusable custom elements with 
desired behavior. 


They are nothing but objects which can contain any/all of the options that the root or any Vue 
instance can contain, including an HTML template to render. 


Components consist of: 


¢ HTML markup: the component's template 
¢ CSS styles: how the HTML markup will be displayed 
¢ JavaScript code: the data and behavior 


These can each be written in a separate file, or as a single file with the .vue extension. Below are 
examples showing both ways: 


.VUE - as a single file for the component 


<style> 
-hello-world-compoment { 


color: #eeeeee; 
background-color: #555555; 


} 
</style> 


<template> 


<div class="hello-world-component"> 
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<p>{ {message}}</p> 
<input @keyup.enter="changeName (Sevent) "/> 
</div> 


</template> 


<script> 
export default { 


props:[ /* to pass any data from the parent here... 


events:{ /* event listeners go here */}, 
ready () { 
this.name= "John"; 
}, 
data(){ 
return{ 


name:'' 


}, 
computed: { 
message () { 
return "Hello from " + this.name; 


}, 
methods: { 


// this could be easily achieved by using v-model on the <input> field, 


to show a method doing it this way. 
changeName (e) { 


this.name = e.target.value; 


} 


</ S@wajoie> 


Separate Files 


hello-world.js - the JS file for the component object 


export default { 


template:require('./hello-world.template.html1'), 
props:[ /* to pass any data from the parent here... 
events:{ /* event listeners go here */ }, 

ready () { 


this.name="John"; 
}, 
data() { 

return{ 


name:'' 


}, 
computed: { 
message () { 
return "Hello World! from " + this.name; 


hy 


methods: { 
changeName (e) { 
let name = e.target.value; 
this.name = name; 
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hello-world.template.html 


<div class="hello-world-component"> 
<p>{{message}}</p> 


<input class="form-control input-sm" @keyup.enter="changeName ($event) "> 
</div> 


hello-world.css 


-hello-world-compoment { 
color: #eeeeee; 
background-color: #555555; 


These examples use es2015 syntax, so Babel will be needed to compile them to es5 for older 
browsers. 


Babel along with Browserify + vueify or Webpack + vue-loader will be required to compile 


hello-world.vue. 
Now that we have the he1lo-worla component defined, we should register it with Vue. 
This can be done in two ways: 


Register as a global component 
In the main. js file (entry point to the app) we can register any component globally with 


Vue.component: 


import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm 
install Vue' 
Vue.component ('hello-world', require('./hello-world'); // global registeration 
new Vue ({ 
el:'body', 


// Templates can be defined as inline strings, like so: 
template:'<div class="app-container"><hello-world></hello-world></div>' 


}); 
Or register it locally within a parent component or root component 


import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm 
install Vue' 
import HelloWorld from './hello-world.js'; 


new Vue({ 
Gilg Morexchi 


template:'<div class="app-container"><hello-world></hello-world></div>", 


components:{HelloWorld} // local registeration 


}); 


Global Components can be used anywhere within the Vue application. 
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Local Components are only available for use in the parent component with which they are 
registered. 


Fragment component 

You may get a console error telling you that you can't do something because yours is a fragment 
component. To solve this sort of issue just wrap your component template inside a single tag, like 
a <div>. 


Local registration of components 
A component can be registered either globally or locally (bind to another specific component). 


var Child = Vue.extend ({ 
Vie ns 
}) 


var Parent = Vue.extend({ 


eemolleces Vssa lp 
components: { 
'my-component': Child 
} 
}) 


Thiw new component () will only be available inside the scope (template) of the Parent component. 
Inline registration 
You can extend and register a component in one step: 


Vue.component ('custom-component', { 
template: '<div>A custom component!</div>' 


}) 


Also when the component is registered locally: 


var Parent = Vue.extend({ 
components: { 
"custom-component!: { 
template: '<div>A custom component!</div>' 


} 


Data registration in components 


Passing an object to the data property when registering a component would cause all instances of 
the component to point to the same data. To solve this, we need to return data from a function. 


var CustomComponent = Vue.extend ({ 
GENES iuliMcicaloim ()) 
return { as 1 } 
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Events 


One of the ways components can communicate with its ancestors/descendants is via custom 
communication events. All Vue instances are also emitters and implement a custom event 
interface that facilitates communication within a component tree. We can use the following: 


* Son: Listen to events emitted by this components ancestors or descendants. 

* Sbroadcast: Emits an event that propagates downwards to all descendants. 

* Sdispatch: Emits an event that triggers first on the component itself and than propagates 
upwards to all ancestors. 

* semit: Triggers an event on self. 


For example, we want to hide a specific button component inside a form component when the 
form submits. On the parent element: 


var FormComponent = Vue.extend ({ 
be Ba 


components: { 


ButtonComponent 
}, 
methods: { 
onSubmit () { 
this.$broadcast ('submit-—form') 


} 
}) 


On the child element: 


var FormComponent = Vue.extend ({ 
WH 86 


events: {f{ 


VSWlomMbe Iron’ Ss setiNcicaem ()) 4 
Console log (les houlG moe niGsincus) ir, 


} 
}) 


Some things to keep in mind: 


¢ Whenever an event finds a component that is listening to it and gets triggered, it will stop 
propagating unless the function callback in this component returns true. 

* Sdispatch() always triggers first on the component that has emitted it. 

¢ We can pass any number of arguments to the events handler. Doing 
this.S$broadcast ('submit-form', this.formData, this.formStatus) allows us to access this 
arguments like 'submit-form': function (formData, formStatus) {} 


Read Components online: https://riptutorial.com/vue-js/topic/1775/components 
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Chapter 3: Computed Properties 


Remarks 


Data vs Computed Properties 


The main use-case difference for the data and computea properties of a vue instance is dependent 
on the potential state or probability of changing of the data. When deciding what category a certain 
object should be, these questions might help: 


* Is this a constant value? (data) 

* Does this have the possibility to change? (computed or data) 

¢ Is the value of it reliant on the value of other data? (computed) 

¢ Does it need additional data or calculations to be complete before being used? (computed) 
¢ Will the value only change under certain circumstances? (data) 


Examples 


Basic Example 
Template 


<div id="example"> 
e=( 2 fig b= Ii 
</div> 


JavaScript 


var vm = new Vue ({ 
el: '#example', 
data: { 
aig il 
}, 
computed: { 
// a computed getter 
JI98 iulmeicitoim () { 
// ~this~ points to the vm instance 
return this.a + 1 
} 
} 
}) 


Result 


Here we have declared a computed property b. The function we provided will be used as the getter 
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function for the property vm.»: 


console.log(vm.b) // -> 2 
vm.a = 2 
console.log(vm.b) // -> 3 


The value of vm.» is always dependent on the value of vm.a. 


You can data-bind to computed properties in templates just like a normal property. Vue is aware 


that vm.b depends on vm.a, So it will update any bindings that depends on vm.» when vm.a changes. 


Computed properties vs watch 
template 


<div id="demo">{ {fullName} }</div> 


watch example 


var vm = new Vue ({ 
el: '#demo', 
data: { 


firstName: 'Foo!', 
lastName: 'Bar', 
fullName: 'Foo Bar' 
} 
}) 


vm.Swatch('firstName', function (val) { 
this.fullName = val + ' ' + this.lastName 

}) 

vm.Swatch('lastName', function (val) { 
this.fullName = this.firstName + ' ' + val 


}) 


Computed example 


var vm = new Vue ({ 
el: '#demo', 
data: { 


firstName: 'Foo', 
lastName: 'Bar' 


}, 


computed: { 
fullName: function () { 
return this.firstName + ' ' + this.lastName 


Computed Setters 
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Computed properties will automatically be recomputed whenever any data on which the 
computation depends changes. However, if you need to manually change a computed property, 
Vue allows you to create a setter method to do this: 


Template (from the basic example above): 


<div id="example"> 
e=( 2 ti, b(t > Ii 
</div> 


Javascript: 


var vm = new Vue ({ 
el: '#example', 
data: { 
ie db 
}, 
computed: { 
be 
// getter 
Gas Euaccaom ()) 1 
ISIE ielaaks).6) ap il 
}, 
// setter 
set: function (newValue) { 
this.a = newValue - 1 


You can now invoke either the getter or the setter: 


console.log(vm.b) Uf => 2 
vm.b = 4 // (setter) 
console.log(vm.b) Jf => a 
console.log(vm.a) iif == & 


vm.b = 4 Will invoke the setter, and set this.a to 3; by extension, vm.b will evaluate to 4. 


Using computed setters for v-model 


You might need a v-mode1 ON a computed property. Normally, the v-model won't update the 
computed property value. 


The template: 


<div id="demo"> 
<div class='inline-block card'> 


<Ghiva@lass—  TomleimneMarker st mlc Online: stabus Os laine lis: atus > </ Guise 
<p class='user-state'>User is {{ (status) ? ‘online’ : ‘offline’ }}</p> 
</div> 


<div class='margin—-5'> 
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<input type='checkbox' v-model='status'>Toggle status 


others) 
</div> 
</div> 


Styling: 


demo { 
font-family: Helvetica; 
font-size: 12px; 


5 ilinllslineJolloele SS i 
display: inline-block; 


~oerd { 
background: #ddd; 
padding:2px 10px; 
border-radius: 3px; 
} 
-onlineMarker { 
width: 10px; 
height: 10px; 
border-radius: 50%; 
transition: all 0.5s ease-out; 


srk ations: 
background-color: #3C3; 


.offline { 
background-color: #aaa; 


-user-state { 
text-transform: uppercase; 
letter-spacing: lpx; 


smMeiceaLia—s) | 


margin: 5px; 


The component: 


var demo = new Vue ({ 
el: '#demo', 
data: { 


statusProxy: null 
}, 
computed: { 
status: { 
ge () i 


return (this.statusProxy 
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(This will show you as offline to 


this.statusProxy 


fiddle Here you would see, clicking the radio button has no use at all, your status is still online. 


var demo = new Vue ({ 
el: '#demo', 
data: { 


statusProxy: null 
}, 
computed: { 
Stalus: 4 
gee (©) 


return (this.statusProxy === null) ? true : this.statusProxy 
}, 
set (val) { 

this.statusProxy = val 


}) 


fiddle And now you can see the toggle happens as the checkbox is checked/unchecked. 


Read Computed Properties online: https://riptutorial.com/vue-js/topic/237 1/computed-properties 
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Chapter 4: Conditional Rendering 


Syntax 


°* <element v-if="condition"></element> //v-if 


* <element v-if="condition"></element><element v-else="condition"></element> //V-if | v-else 


° <template v-if="condition">...</template> //templated v-if 


* <element v-show="condition"></element> //v-show 


Remarks 


It is very important to remember the difference between v-it and v-show. While their uses are 
almost identical, an element bound to v-is will only render into the DOM when it's condition is true 
for the first time. When using the v-show directive, all elements are rendered into the DOM but are 
hidden using the display style if the condition is faise! 


Examples 


Overview 


In Vue.js, conditional rendering is achieved by using a set of directives on elements in the 
template. 


v-if 


Element displays normally when condition is true. When the condition is faise, only partial 
compilation occurs and the element isn't rendered into the DOM until the condition becomes true. 


v-else 


Does not accept a condition, but rather renders the element if the previous element's v-it 
condition is faise. Can only be used after an element with the v-is directive. 


v-show 


Behaves similarly to v-it, however, the element will a/ways be rendered into the DOM, even when 
the condition is faise. If the condition is ¢aise, this directive will simply set the element's display 
style to none. 

v-if / v-else 


Assuming we have a vue. js instance defined as: 


var vm = new Vue({ 
el: '#example', 
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a: true, 
b: false 


}); 


You can conditionally render any html element by including the v-if directive; the element that 
contains v-if will only render if the condition evaluates to true: 


<!-- will render 'The condition is true' into the DOM -—-> 
<div id="example"> 

<hl v-if="a">The condition is true</hl1> 
</div> 


The <ni> element will render in this case, because the variable ‘a’ is true. v-if can be used with any 
expression, computed property, or function that evaluates to a boolean: 


<div v-if="0 === 1"> false; won't render</div> 
(5) 


<div v-if="typeof(5) === 'number'"> true; will render</div> 


You Can uSeé a template element to group multiple elements together for a single condition: 


<!-- in this case, nothing will be rendered except for the containing 'div' --> 
<div id="example"> 
<template v-if="b"> 
<hl>Heading</h1> 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
</template> 
</div> 


When using v-is, you also have the option of integrating a counter condition with the v-eise 
directive. The content contained inside the element will only be displayed if the condition of the 
previous v-if was false. Note that this means that an element with v-else must appear immediately 
after an element with v-if. 


<== yalllil memeler omlky Uiswisin? —— = 


<div id="example"> 

<hl v-if="b">IF</h1> 

<hl v-else="a">ELSE</h1> 
</div> 


Just as with v-if, with v-else you can group multiple html elements together within a <tempilate>: 


<div v-if=""a' === 'b'"> This will never be rendered. </div> 
<template v-else> 
<ul> 


<li> You can also use templates with v-else. </li> 
<li> All of the content within the template </li> 
<li> will be rendered. </li> 
<//wUL> 
</template> 
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v-show 


The use of the v-show directive is almost identical to that of v-iz. The only differences are that v- 
show Goes not support the <tempiate> syntax, and there is no "alternative" condition. 


var vm = new Vue ({ 
el: '#example', 
data: { 
aie ieicblS 


}); 


The basic use is as follows... 


<l== willl wenclez “Conclittaom mei! => 
<div id="example"> 

<hil v-show="a">Condition met</hl1> 
</div> 


While v-show does not support the v-eise directive to define "alternative" conditions, this can be 


accomplished by negating the previous one... 


<!—— will sender “ihis @s Shown! = ——> 
<div id="example"> 
<hl v-show="!a">This is hidden</hl1> 
<hl1 v-show="a">This is shown</hl> 
</div> 


Read Conditional Rendering online: https://riptutorial.com/vue-js/topic/3465/conditional-rendering 
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Chapter 5: Custom Components with v-model 


Introduction 


Often times we have to create some components which perform some actions/operations on data 
and we require that in the parent component. Most of the times vuex would be a better solution, but 
in cases where the child component's behavior has nothing to do with application state, for 
instance: A range-slider, date/time picker, file reader 


Having individual stores for each component each time they get used gets complicated. 


Remarks 


To have v-mode1 ON a component you need to fulfil two conditions. 


1. It should have a prop named 'value' 
2. It should emit an input event with the value expected by the parent components. 


<component v-model='something'></component> 


is just syntactic sugar for 


<component 
:value="sSomething" 
@input="something = Sevent.target.value" 


> 
</component> 


Examples 


v-model on a counter component 
Here counter Is a child component accessed by demo which is a parent component using v-model. 


// child component 
Vue.component ('counter', { 
template: *<div><button @click='add'>+1</button> 
<button @click='sub'>-1</button> 
<div>this is inside the child component: {{ result }}</div></div>*, 
data () { 
return { 
result: 0 
} 
}, 
props: ['value'], 
methods: { 
emitResult () { 
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Ells, Semmie (Vaimyouie, ielnals . mexsiuiilie )) 


eiclel (()) x 
this.result += 1 
this.emitResult () 


sub () { 
this.result -= 1 
( 


) 


this.emitResult 


} 
}) 


This child component will be emitting resuit each time sub() OF ada() methods are called. 


// parent component 
new Vue ({ 
el: '#demo', 
data () { 
return { 
resultFromChild: null 


} 
}) 


// parent template 
<div id='demo'> 
<counter v-model='resultFromChild'></counter> 


This is in parent component {{ resultFromChild }} 
</div> 


Since v-mode1 is present on the child component, a prop with name vaiue was sent at the same 
time, there is an input event on the counter which will in turn provide the value from the child 
component. 


Read Custom Components with v-model online: https://riptutorial.com/vue-js/topic/9353/custom- 
components-with-v-model 
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Syntax 

® Vue.directive(id, definition); 

°* Vue.directive(id, update); //when you need only the update function. 
Parameters 


String - The directive id that will be used without the v- prefix. (Add the v- prefix 


ss when using it) 
Perce Object - A definition object can provide several hook functions (all optional): bina 
, update, ANd unbind 
Examples 
Basics 


In addition to the default set of directives shipped in core, Vue.js also allows you to register custom 
directives. Custom directives provide a mechanism for mapping data changes to arbitrary DOM 
behavior. 


You can register a global custom directive with the vue.directive(id, definition) method, passing 
in a directive id followed by a definition object. You can also register a local custom directive by 
including it ina component's directives option. 


Hook Functions 


¢ bind: called only once, when the directive is first bound to the element. 

* update: called for the first time immediately after bina with the initial value, then again 
whenever the binding value changes. The new value and the previous value are provided as 
the argument. 

¢ unbind: called only once, when the directive is unbound from the element. 


Vue.directive('my-directive', { 
logalingls seineicsleym ()) 4 
// do preparation work 
// e.g. add event listeners or expensive stuff 


// that needs to be run only once 
}, 
update: function (newValue, oldValue) { 

// do something based on the updated valu 

// this will also be called for the initial value 
}, 
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Winloalinels iwhacieskoim (()) if 
// do clean up work 


// e.g. remov vent listeners added in bind() 


Ip) 


Once registered, you can use it in Vue.js templates like this (remember to add the v- prefix): 


<div v-my-directive="someValue"></div> 


When you only need the update function, you can pass in a single function instead of the definition 


object: 


Vue.directive('my-directive', function (value) { 
// this function will be used as update() 
}) 


Directive Instance Properties 


All the hook functions will be copied into the actual directive object, which you can access inside 
these functions as their this context. The directive object exposes some useful properties: 


* el: the element the directive is bound to. 

* vm: the context ViewModel that owns this directive. 

* expression: the expression of the binding, excluding arguments and filters. 
* arg: the argument, if present. 

* name: the name of the directive, without the prefix. 

* modifiers: an object containing modifiers, if any. 

* descriptor: an object that contains the parsing result of the entire directive. 
* params: an object containing param attributes. Explained below. 


You should treat all these properties as read-only and never modify them. You can 
attach custom properties to the directive object too, but be careful not to accidentally 
overwrite existing internal ones. 


An example of a custom directive using some of these properties: 


HTML 


<div id="demo" v-demo:hello.a.b="msg"></div> 


JavaScript 
Vue.directive('demo', { 
loalinels iebievcieslom (3) 4 


console.log('demo bound! ") 
}, 
update: function (value) { 
this.el.innerHTML = 
"name — ' + ims .ineme ae Vers a 


"expression — ' + this.expression + '<br>' + 
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‘argument - ' ar lMaLS eee; ae U<oreSY ap 
Uniteyslitieateuas; = Yo ap WiSO)N a Sie seaLiaepabieyy (Eloi S) intoxcliL teases) ap V<owes>¥ ap 
"value - '! + value 
} 
}) 
var demo = new Vue({ 
el: '#demo', 
data: { 


msq: “hello! 
} 
}) 


Result 

name — demo 

expression — msg 

argument - hello 

modifiers — {"b":true, "a":true} 
value - hello! 


Object Literal 


If your directive needs multiple values, you can also pass in a JavaScript object literal. Remember, 
directives can take any valid JavaScript expression: 


HTML 


Kchiny wo-clante="4{ oles Ywestes”, eres Yneililol’ |! s</chive 


JavaScript 


Vue.directive('demo', function (value) { 


console.log(value.color) // "white" 
console.log(value.text) // "hello!" 


}) 


Literal Modifier 


When a directive is used with the literal modifier, its attribute value will be interpreted as a plain 
string and passed directly into the upaate method. The update method will also be called only once, 
because a plain string cannot be reactive. 


HTML 


<div v-demo.literal="foo bar baz"> 


JavaScript 


Vue.directive('demo', function (value) { 


console.log(value) // "foo bar baz" 


}) 
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Read Custom Directives online: https://riptutorial.com/vue-js/topic/2368/custom-directives 


https://riptutorial.com/ 


24 


Chapter 7: Custom Filters 


Syntax 


* vue.filter(name, function(value) {}); //Basic 

* Vue.filter(name, function(value, begin, end) {}); //Basic with wrapping values 

* Vue.filter(name, function(value, input) {}); //Dynamic 

®* vue.filter(name, { read: function(value){}, write: function(value){} }); //Two-way 


Parameters 


name String - desired callable name of the filter 

value [Callback] Any - value of the data passing into the filter 
begin [Callback] Any - value to come before the passed data 
end [Callback] Any - value to come after the passed data 


input [Callback] Any - user input bound to Vue instance for dynamic results 


Examples 


Two-way Filters 


With a two-way filter, we are able to assign a read and write operation for a single fiiter that 
changes the value of the same data between the view and model. 


LSS 
Vue.filter('uppercase', { 


//read : model -> view 
read: function(value) { 
return value.toUpperCase(); 


hy 


//write : view -> model 
write: function(value) { 


return value.toLowerCase(); 


/* 
* Base value of data: 'example string' 
* 


* In the view : 'EXAMPLE STRING' 
* In the model : ‘example string' 
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Ze, 


Basic 


Custom filters in vue. js can be created easily in a single function call to vue. filter. 


# fas 
Vue.filter('reverse', function(value) { 
return value.split('').reverse().join(''); 
}); 
//HTML 
<span>{{ msg | reverse }}</span> //'This is fun!’ => '!nuf si sihT' 


It is good practice to store all custom filters in separate files e.g. under ./fiiters as it is then easy 
to re-use your code in your next application. If you go this way you have to replace JS part: 


//IS 
Vue.filter('reverse', require('./filters/reverse')); 


You can also define your own begin and ena wrappers as well. 


# fais 
Vue.filter('wrap', function(value, begin, end) { 
return begin + value + end; 


}); 


//8TML 
<span>{{ msg | wrap 'The' 'fox' }}</span> //'quick brown' => 'The quick brown fox' 


Read Custom Filters online: https://riptutorial.com/vue-js/topic/1878/custom-filters 


https://riptutorial.com/ 26 


Chapter 8: Data Binding 


Examples 


Text 


The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly 
braces): 


<span>Message: {{ msg }}</span> 


The mustache tag will be replaced with the value of the msg property on the corresponding data 
object. It will also be updated whenever the data object’s msg property changes. 


You can also perform one-time interpolations that do not update on data change: 


<span>This will never change: {{* msg }}</span> 


Raw HTML 


The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, 
you will need to use triple mustaches: 


<div>{{{ raw_html }}}</div> 


The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse 
template pieces, you should use partials. 


Attributes 
Mustaches can also be used inside HTML attributes: 
<div id="item-{{ id }}"></div> 


Note that attribute interpolations are disallowed in Vue.js directives and special attributes. Don’t 
worry, Vue.js will raise warnings for you when mustaches are used in wrong places. 


Filters 


Vue.js allows you to append optional “filters” to the end of an expression, denoted by the “pipe” 
symbol: 


{{ message | capitalize }} 


Here we are “piping” the value of the message expression through the built-in capitalize filter, which 
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is in fact just a JavaScript function that returns the capitalized value. Vue.js provides a number of 
built-in filters, and we will talk about how to write your own filters later. 


Note that the pipe syntax is not part of JavaScript syntax, therefore you cannot mix filters inside 
expressions; you can only append them at the end of an expression. 


Filters can be chained: 
{{ message | filterA | filterB }} 
Filters can also take arguments: 
{{ message | filterA 'argl' arg2 }} 
The filter function always receives the expression’s value as the first argument. Quoted arguments 
are interpreted as plain string, while un-quoted ones will be evaluated as expressions. Here, the 


plain string 'argi' will be passed into the filter as the second argument, and the value of 
expression arg2 will be evaluated and passed in as the third argument. 


Read Data Binding online: https://riptutorial.com/vue-js/topic/1213/data-binding 
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Chapter 9: Dynamic Components 


Remarks 


<component> is a reserved component element, don't be confused with components instance. 


v-bind is a directive. Directives are prefixed with v- to indicate that they are special attributes 
provided by Vue. 


Examples 


Simple Dynamic Components Example 


Dynamically switch beetween multiple components using <component> element and pass data to v- 
bind:is attribute: 


Javascript: 


new Vue({ 
el: '#app', 
data: { 
currentPage: 'home' 
}, 


components: { 


home: 
template: "<p>Home</p>" 
, 
about: { 
template: "<p>About</p>" 


contact: 4 


template: "<p>Contact</p>" 


HTML: 


<div id="app"> 
<component v-bind:is="currentPage"> 


<!-- component changes when currentPage changes! > 
<l—— @llicoulies lho == 
</component> 
</div> 


Snippet: 
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Live Demo 
Pages Navigation with keep-alive 


Sometimes you want to keep the switched-out components in memory, to make that happen, you 
should use <keep-alive> element: 


Javascript: 


new Vue({ 
el: '#app', 
data: { 
currentPage: 'home', 
}, 
methods: { 
switchTo: function(page) { 


this.currentPage = page; 


}, 


components: { 


home: { 
template: *<div> 
<h2>Home</h2> 
<p>{{ homeData }}</p> 
</CliiwS> , 
data: function() { 
return { 
homeData: 'My about data' 
} 
} 
}, 
about: { 
template: °<div> 
<h2>About</h2> 
<p>{{ aboutData }}</p> 
</chivs~ - 


data: function() { 
return { 
aboutData: 'My about data' 


} 
}, 
contac: 4 
template: °*<div> 
<h2>Contact</h2> 
<form method="POST" @submit.prevent> 
<label>Your Name:</label> 
<input type="text" v-model="contactData.name" > 
<label>You message: </label> 
<textarea v—-model="contactData.message"></textarea> 
<button type="submit">Send</button> 
</form> 
</ciiws - 
data: function() { 


return { 
contactData: { name:'', message:'' } 
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HTML: 


<div id="app"> 
<div class="navigation"> 


<i> 
<li><a href="#home" @click="switchTo ('home') ">Home</a></1li> 
<Iis<el lice aloomice” [cleiliehkaVsnplicomre ( Alsobie !)) VSiNoome</s</ aks 
<is<a nea "Foomcacc! Celiac =Vswmlecmte ( eomeacie ) VscConencc</aS</ las 
</ul> 
</div> 


<div class="pages"> 
<keep-alive> 
<component :is="currentPage"></component> 


</keep-alive> 
</div> 
</div> 


CSS: 


-navigation { 
margin: 10px 0; 


-Navigation ul { 
margin: 0; 
joaiclolaliness is 


JMENALG ae eim TIL I | 
display: inline-block; 
ieueglin=Iedelac. 3 AOjos<p 


input, label, button { 
display: block 


input, textarea { 
margin-bottom: 10px; 


Snippet: 


Live Demo 


Read Dynamic Components online: https://riptutorial.com/vue-js/topic/7 702/dynamic-components 
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Chapter 10: Event Bus 


Introduction 


Event buses are a useful way of communicating between components which are not directly 
related, i.e. Have no parent-child relationship. 


It is just an empty vue instance, which can be used to semit events or listen son the said events. 
Syntax 

1. export default new Vue() 
Remarks 
Use vuex if your application has a lot of components requiring the data of each other. 
Examples 
eventBus 


// setup an event bus, do it in a separate js file 
var bus = new Vue() 


// imagine a component where you require to pass on a data property 
// or a computed property or a method! 


Vue.component ('card', { 
template: °*<div class='card'> 
Name: 


<div class='margin-5'> 
<input v-model='name'> 
</div> 
<div class='margin—-5'> 
<button @click='submit '>Save</button> 
</div> 
</ Chine” - 
data() { 
return { 
name: null 
} 
}, 


methods: { 
submit() { 
bus.Semit ('name-set', this.name) 


} 
}) 


// In another component that requires th mitted data. 
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var data = { 


message: 'Hello Vue.js!' 
} 
var demo = new Vue ({ 

el: '#demo', 

data: data, 

created() { 


console.log (bus) 
bus.Son('name-set', (name) => { 
this.message = name 
}) 
} 
}) 


Read Event Bus online: https://riptutorial.com/vue-js/topic/9498/event-bus 
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Chapter 11: Events 


Examples 


Events syntax 


To send an event: vm.s mit ('new-message'); 


To catch an event: vm.son('new-message'); 

To send an event to all components down: vm. $broadcast ('new-message') ; 
To send an event to all components up: vm. $dispatch('new-message') ; 

Note: sbroadcast and $dispatch are deprecated in Vue2. (see Vue2 features) 
When should I| use events ? 


The following picture illustrates how component communication should work. The picture comes 
from The Progressive Framework slides of Evan You (Developer of VueJS). 
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Component Communication: 


Props in, Events out 


- 
- = 


Emit 
Events 


Pass 
Props 


—— oe 
"=seen\awewe = ™ 


- = 


Here is an example of how it works : 
DEMO 


HTML 


<script type="x-template" id="message-—box"> 


<input type="text" v-model="msg" @keyup="Semit ('new-message', msg)" /> 
</script> 


<message-box :msg="message" @new-message="updateMessage"></message-box> 
<div>You typed: {{message}}</div> 


JS 


var messageBox = { 
template: '#message-box', 
jorxooss || Maasre;” | 

}; 


new Vue({ 
el *bedy, 
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data: { 
message: '' 
}, 
methods: { 
updateMessage: function(msg) { 
this.message = msg; 
} 
}, 
components: { 
"message-box': messageBox 
} 
}); 


The example above can be improved ! 


The example above shows how the component communication works. But in case of a custom 
input component, to synchronize the parent variable with the value typed, we sould use v-mode1. 


DEMO Vuet 


DEMO Vue2 


In Vue1, you should use .sync on the prop sent to the <message-box> Component. This tells VueJS 


to synchronize the value in the child component with the parent's. 


Remember: Every component instance has its own isolated scope. 


HTML Vue 


<script type="x-template" id="message-box"> 
<input v-model="value" /> 
Kj eerie > 


<div id="app"> 


<message-box :value.sync="message"></message-box> 
<div>You typed: {{message}}</div> 
</div> 


In Vue2, there is a special 'input' event you Can semit. Using this event allows you to put a v- 
model directly on the <message-box> Component. The example will look as follow: 


HTML Vue2 


<script type="x-template" id="message-box"> 
<input :value="value" @input="Semit ('input', Sevent.target.value)" /> 
SiS crepes 


<div id="app"> 


<message-box v-model="message"></message-box> 
<div>You typed: {{message}}</div> 
</div> 


JS Vue 1 & 2 


https://riptutorial.com/ 


36 


var messageBox = { 


template: '#message-box', 
props: ['value'] 


hi 


new Vue ({ 
el: ‘#app', 
gatas 4 
message: 
}, 


components: { 


"message-box': messageBox 
} 
}); 


Notice how faster the input is updated. 


How to deal with deprecation of $dispatch and $broadcast? (bus event 
pattern) 


You might have realized that semit is scoped to the component that is emitting the event. That's a 
problem when you want to communicate between components far from one another in the 
component tree. 


Note: In Vue1 you coud use sdispatch OF $broadcast, but not in Vue2. The reason being that it 
doesn't scale well. There is a popular bus pattern to manage this: 


DEMO 


HTML 


<script type="x-template" id="sender"> 
<button @click="bus.Semit ('new-event')">Click me to send an event !</button> 


</ serile> 


<script type="x-template" id="receiver"> 
<div>I received {{numberOfEvents}} event{{numberOfEvents == 1? '' : 's'}}</div> 


</ seis 


<sender></sender> 


<receiver></receiver> 


JS 


var bus = new Vue(); 


var senderComponent = { 


template: '#sender', 
data() { 
return { 
[gels S louis) 


} 
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var receiverComponent = { 


template: '#receiver', 
data() { 
return { 
numberOfEvents: 0 


} 


}, 
ready() { 
var self = this; 


bus.Son('new-event', function() { 


++self.numberOfEvents; 
}); 
} 
}; 


new Vue({ 
el: ‘body', 
components: { 
"sender': senderComponent, 
'receiver': receiverComponent 


} 
}); 


You just need to understand that any vue.) instance can semit and catch (son) an event. We just 
declare a global vue instance call bus and then any component with this variable can emit and 
catch events from it. Just make sure the component has access to the bus variable. 


Read Events online: https://riptutorial.com/vue-js/topic/5941/events 
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Chapter 12: Lifecycle Hooks 


Examples 


Hooks for Vue 1.x 
° init 


Called synchronously after the instance has been initialized and prior to any initial data 
observation. 


° created 


Called synchronously after the instance is created. This occurs prior to se1 setup, but after 
data observation, computed properties, watch/event callbacks, ANd methods have been setup. 


° beforeCompile 
Immediately prior to compilation of the Vue instance. 
° compiled 


Immediately after compilation has completed. All directives are linked but still prior to se1 
being available. 


° ready 


Occurs after compilation and se1 are complete and the instance is injected into the DOM for 
the first time. 


° attached 
Occurs when se1 is attached to the DOM by a directive or instance calls sappendto(). 
° detached 
Called when se1 is removed/detached from the DOM or instance method. 
* beforeDestroy 
Immediately before the Vue instance is destroyed, but is still fully functional. 
* destroyed 


Called after an instance is destroyed. All bindings and directives have already been 
unbound and child instances have also been destroyed. 
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Using in an Instance 


Since all lifecycle hooks in vue. js are just functions, you Can place any of them directly in the 
instance declaraction. 


RSS 
new Vue({ 


el: '#example', 
data: { 

}, 

methods: { 


hy 


//LIFECYCLE HOOK HANDLING 
created: function() { 


}, 
ready: function() { 
} 


}); 


Common Pitfalls: Accessing DOM from the ready() hook 


A common usecase for the reaay() hook is to access the DOM, e.g. to initiate a Javascript plugin, 
get the dimensions of an element etc. 


The problem 


Due to Vue's asynchronous DOM update mechanism, it's not guaranteed that the DOM has been 
fully updated when the reaay() hook is called. This usually results in an error because the element 
is undefined. 


The Solution 


For this situation, the snex: rick ) instance method can help. This method defers the execution of 
the provided callback function until after the next tick, which means that it is fired when all DOM 
updates are guaranteed to be finished. 


Example: 


module.exports { 
ready: function () { 


$('.cool-input') .initiateCoolPlugin() //fails, because element is not in DOM yet. 
this. snext lick (£tunction() { 
$('.cool-input') .initiateCoolPlugin() // this will work because it will be executed 
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after the DOM update. 
}) 
} 
} 


Read Lifecycle Hooks online: https://riptutorial.com/vue-js/topic/1 852/lifecycle-hooks 
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Chapter 13: List Rendering 


Examples 


Basic Usage 


A list can be rendered using the v-for directive. The syntax requires that you specify the source 
array to iterate on, and an alias that will be used to reference each item in the iteration. In the 
following example we use items as the source array, and item as the alias for each item. 


HTML 


<div id="app"> 
<h1l>My List</h1> 
<table> 
<tr v-for="item in items"> 
<td>{{item}}</td> 
<a itesta 
</table> 
</div> 


Script 


new Vue ({ 
el: '#app', 
data: { 
eens ([Vaticeim 17, Vatican: 20, Valeeim 3) ] 
} 
}) 


You can view a working demo here. 
Only render HTML items 


In this example will render five <1i> tags 


<ul id="render-sample"> 
<i W=itOm="in alin GS 
Hello Loop 
<// Lats 
</ul> 


Pig countdown list 


<dl> 
<li v-for="n in 10">{{11 - n}} pigs are tanning at the beach. One got fried, and 
</ol> 
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https://jsfiddle.net/gurghet/3jeyka22/ 


Iteration over an object 


v-for Can be used for iterating over an object keys (and values): 


HTML: 


<div v-for="(value, key) in object"> 
{{ key }} : {{ value }} 
</div> 


Script: 


new Vue ({ 
1: ‘'#repeat-object', 


data: { 
object: { 
FirstName: 'John', 


LastName: 'Doe', 
Age: 30 
} 
} 
}) 


Read List Rendering online: https://riptutorial.com/vue-js/topic/1 972/list-rendering 
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Chapter 14: Mixins 


Examples 


Global Mixin 


You can also apply a mixin globally. Use caution! Once you apply a mixin globally, it will affect 
every Vue instance created afterwards. When used properly, this can be used to inject processing 
logic for custom options: 


// inject a handler for “myOption* custom option 
Vue.mixin ({ 
created: function () { 
var myOption = this.Soptions.myOption 
if (myOption) { 
console. log (myOption) 


} 
}) 


new Vue ({ 

myOption: 'hello!' 
}) 
// —> "hello!" 


Use global mixins sparsely and carefully, because it affects every single Vue instance 
created, including third party components. In most cases, you should only use it for 
custom option handling like demonstrated in the example above. 


Custom Option Merge Strategies 


When custom options are merged, they use the default strategy, which simply overwrites the 
existing value. If you want a custom option to be merged using custom logic, you need to attach a 
function to Vue.config.optionMergeStrategies: 


Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { 
// veturn mergedVal 


} 
For most object-based options, you can simply use the same strategy used by methods: 


var strategies = Vue.config.optionMergeStrategies 


strategies.myOption = strategies.methods 


Basics 


Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object 
can contain any component options. When a component uses a mixin, all options in the mixin will 
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be “mixed” into the component’s own options. 


// define a mixin object 
var myMixin = { 
created: function () { 
this.hello() 
}, 
methods: { 
hello: function () { 
console.log('hello from mixin!'") 


} 


// define a component that uses this mixin 


var Component = Vue.extend ({ 
mixins: [myMixin] 
}) 
var component = new Component() // -> "hello from mixin!" 


Option Merging 


When a mixin and the component itself contain overlapping options, they will be “merged” using 
appropriate strategies. For example, hook functions with the same name are merged into an array 
so that all of them will be called. In addition, mixin hooks will be called before the component’s 
own hooks: 


var mixin = { 
created: function () { 
console.log('mixin hook called') 


new Vue ({ 
mixins:; [mixin], 
created: function () { 
console.log('component hook called") 
} 
}) 


// —> “mixin hook called" 
// -> “component hook called" 


Options that expect object values, for example methods, components and directives, Will be merged 
into the same object. The component’s options will take priority when there are conflicting keys in 
these objects: 


var mixin = { 
methods: { 
OOS iephaeicalom ()) { 
console.log('foo') 
}, 
COmeliciesimess Furncicaom ()) 
console.log('from mixin') 
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var vm = new Vue ({ 
jaksakionsy 2 |Pudalsseabiet || 
methods: { 
lgaies itphweicalom (()) 
console.log('bar') 
}, 
COmelieiesimes Furncieaom ()) 
console.log('from self') 


} 


Wiis) f/f =s Warreyol! 
vm.bar() // -—> "bar" 
Wil, Comic sceaime()) (ff => Witiom sells’ 


Note that the same merge strategies are used in vue.extend(). 


Read Mixins online: https://riptutorial.com/vue-js/topic/2562/mixins 
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Chapter 15: Modifiers 


Introduction 


There are some frequently used operations like event .preventDefault () Of event. stopPropagat ion () 
inside event handlers. Although we can do this easily inside methods, it would be better if the 
methods can be purely about data logic rather than having to deal with DOM event details. 


Examples 


Event Modifiers 


Vue provides event modifiers for v-on by calling directive postfixes denoted by a dot. 


* .stop 
° prevent 
° .capture 
° .self 


* .once 


For examples: 


<!—- the click event's propagation will be stopped --> 
<a v-on:click.stop="doThis"></a> 


<!-- the submit event will no longer reload the page --> 
<form v-on:submit.prevent="onSubmit"></form> 


<!-- use capture mode when adding the event listener --—> 

<div v-on:click.capture="doThis">...</div> 

<!—- only trigger handler if event.target is th lement itself > 
<!—- i.e. not from a child element --—> 

<div v-on:click.self="doThat">...</div> 


Key Modifiers 


When listening for keyboard events, we often need to check for common key codes. 
Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used 
keys: 


° .,enter 


° .tab 

* .delete (captures both “Delete” and “Backspace” keys) 
®* .esc 

° .space 

°  .up 

* .down 

° left 

* .right 
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For examples: 


<input v-on:keyup.enter="sSubmit"> 


Input Modifiers 
° trim 


If you want user input to be trimmed automatically, you can add the trim modifier to your v-mode1 
managed inputs: 


<input v-model.trim="msg"> 


° .,number 


If you want user input to be automatically typecast as a number, you can do as follow: 


<input v-model.number="age" type="number"> 
° .lazy 


Generally, v-mode1 syncs the input with the data after each input event, but you can add the 1azy 
modifier to instead sync after change events: 


<input v-model.lazy="msg" > 


Read Modifiers online: https://riptutorial.com/vue-js/topic/861 2/modifiers 
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Chapter 16: Plugins 


Introduction 


Vue plugins adds global functionality as, global methods, directives, transitions, filters, instance 
methods, objects and inject some component options using mixins 


Syntax 


¢ MyPlugin.install = function (Vue, options) {} 


Parameters 


rane [ono 


Vue Vue constructor, injected by Vue 


options Additional options if needed 


Remarks 


In most cases you will need to explicitly tell Vue to use a plugin 


// calls ~MyPlugin.install (Vue) ~ 
Vue.use (MyPlugin) 


To pass options 


Vue.use(MyPlugin, { someOption: true }) 


Examples 
Simple logger 


//myLogger.js 
export default { 


install(Vue, options) { 
Eunice Lon log (type, title, ext)! 
Compolle.ikoc (~ [Sittevioe! || Siicsicike |! = Siteese}”)) p 
} 


Vue .prototype.$log = { 


error(title, text) { log('danger', title, text) }, 
success(title, text) { log('success', title, text) }, 
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Before your main Vue instance tell to register your plugin 


//main.js 
import Logger from './path/to/myLogger'; 


Vue.use (Logger) ; 


var vm = new Vue ({ 
el tappwy, 
template: '<App/>', 
components: { App } 
}) 


Now you can Call this.s1og on any child component 


//myComponent.vue 
export default { 


data() { 
return {}; 

}, 

methods: { 
Save() { 


this.$log.success('Transaction saved!'); 


Read Plugins online: https://riptutorial.com/vue-js/topic/8726/plugins 


https://riptutorial.com/ 


50 


Chapter 17: Polyfill “webpack" template 


Parameters 
Files or packages Command or configuration to modify 
babel-polyfill npm i -save babel-polyfill 
. files: ['../../node_modules/babel 
karma.conf.js polyfill/dist/polyfill.js','./index.js'], 
webpack.base.conf.js app: ['babel-polyfill', './src/main.js'] 


Remarks 


The configurations described above, the example using a non-sstandardised function will work on 
"internet explorer" and npm test will pass. 


Examples 
Usage of functions to polyfill (ex: find) 


<template> 
<div class="hello"> 
<p>{{ filtered() }}</p> 
</div> 
</template> 


<sremiloc> 
export default { 
name: 'hello', 


data () f 
return { 
iaisies [Meore!, “reaticsah’, Vice? , Mesa! ] 
} 
}, 
methods: { 
filtered () { 
return this.list.find((el) => el === 'tata') 


} 
} 
} 


</script> 


Read Polyfill "webpack" template online: https://riptutorial.com/vue-js/topic/91 74/polyfill--webpack-- 
template 
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Chapter 18: Props 


Remarks 


camelCase <=> kebab-case 


When defining the names of your props, always remember that HTML attribute names are case- 
insensitive. That means if you define a prop in camel case in your component definition... 


Vue.component ('child', { 
props: ['myProp'], 


}); 


...you must call it in your HTML component as my-prop. 
Examples 


Passing Data from parent to child with props 


In Vue.js, every component instance has its own isolated scope, which means that if a parent 
component has a child component - the child component has its own isolated scope and the 
parent component has its own isolated scope. 


For any medium to large size app, following best practices conventions prevents lots of headaches 
during the development phase and then after while maintenance. One of such things to follow is 
that avoid referencing/mutating parent data directly from the child component. So then how 
do we reference the parent data from within a child component? 


Whatever parent data is required in a child component should be passed to the child as props from 
the parent. 


Use Case: Suppose we have a User database with two tables users and addresses with the 
following fields: 
users Table 


John Mclane_ (1) 23456789012 john@dirhard.com 


James Bond (44) 77700070077 bond@mi6.com 


addresses lable 
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ee aes 


Nakatomi Towers Broadway New York 


Mi6 House Buckingham Road London 


and we want to have three components to display corresponding user information anywhere in our 
app 


user-component.js 


export default { 


template: <div class="user-component "> 
<label for="name" class="form-control">Name: </label> 


<input class="form-control input-sm" name="name" v—model="name"> 
<contact-details :phone="phone" :email="email"></contact-—details> 
</Caiw> 


data () { 
return { 
name:'', 
phone:'', 
email:'' 


contact-details.js 


import Address from './address'; 
export default { 


template: <div class="contact-—details-—component> 
<h4>Contact Details:</h4> 
<label for="phone" class="form-control">Phone: </label> 


<input class="form-control input-sm" name="phone" v—model="phone"> 


<label for="email" class="form-control">Email: </label> 
<input class="form-control input-sm" name="email" v-—model="email"> 


<h4>Address:</h4> 
<address :address-type="addressType"></address> 


//s camelCase vs kebab-cas xplanation below 
</ Caw, 
props: ['phone', ‘'email'], 
data: () { 
return: { 


addressType: 'Office' 


hy 


components: {Address} 


address.js 


export default { 


template: <div class="address-—component"> 
<h6>{{addressType} }</h6> 
<label for="block" class="form-control">Block: </label> 
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<input class="form-control input-sm" name="block" v-model="block"> 

<label for="street" class="form-control">Street: </label> 

<input class="form-control input-sm" name="street" v-model="street"> 

<label for="city" class="form-control">City: </label> 

<input class="form-control input-sm" name="city" v-model="city"> 
</Caiw>~ - 


props: { 
addressType: { 
required:true, 
type:String, 
default: 'Office' 
}, 
data () { 
return { 
DOG, 
street:'', 
Gabiey 3 VY 


main.js 


import Vue from 'vue'; 


Vue.component ('user-component', require'./user-component'); 
Wiwencomponent aheontact details! require lm Contact Gctalihs Wr 


new Vue({ 


el:'body' 
}); 


index.html 
<body> 
<user-component></user-component> 


</body> 


We are displaying the phone and emai data, which are properties of user-component IN contact- 
details which doesn't have phone or email data. 


Passing data as props 


So within the user-component.js In the template property, where we include the <contact-details> 
component, we are passing the phone and the email data from <user-component>(parent 
component) to <contact-detaiis>(child component) by dynamically binding it to the props - 
:phone="phone" and :email="email which is same as v-bind:phone="phone" and v-bind:email="email" 


Props - Dynamic Binding 


Since we are dynamically binding the props any change in phone or email within the parent 
component i.e. <user-component> Will immediately be reflected in the child component i.e. <contact- 


details>. 
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Props - as Literals 


However, if we would have passed the values of phone and email as string literal values like 
phone="(44) 777 0007 0077" email="bond@mié.com" then it would not reflect any data changes which 
happen in the parent component. 


One-Way binding 


By default the direction of changes is top to bottom i.e. any change to dynamically bound props in 
the parent component will propagate to the child component but any change to the prop values in 
a child component will not propagate to the parent. 


For eg: if from within the <contact-details> We change the email from bondémié.com to 
jamesbond@mié.com, the parent data i.e. phone data property in <user-component> will still contain a 
value Of bond@mié.com. 


However, if we change the value of email from bondemié.com tO jamesbond@mié.co in the parent 
component (<user-component> in Our use case) then the value of email in the child component ( 
<contact-details> in our use Case) will change to jamesbond@mié.com automatically - change in 
parent is instantly propagated to the child. 


Two-Way Binding 


If we want two-way binding then we have to explicitly specify two-way binding as 
:email.sync="email" instead of :email="emai1". Now if we change the value of prop in the child 
component the change will be reflected in the parent component as well. 


In a medium to large app changing parent state from the child state will be very hard to detect and 
keep track of especially while debugging - Be cautious . 


There won't be any .sync option available in Vue.js 2.0. The two-way binding for props is being 
deprecated in Vue.js 2.0. 


One-time Binding 


It is also possible to define explicit one-time binding as :email.once="email, it is more or less 
similar to passing a literal, because any subsequent changes in the parent property value will not 
propagate to the child. 


CAVEAT 

When Object or Array is passed as prop, they are ALWAYS PASSED BY REFERENCE, which 
means irrespective of the binding type explicitly defined :emaii.sync="email" Of :email="email” OF 
:email.once="email", if email is an Object or an Array in the parent then regardless of the binding 
type, any change in the prop value within the child component will affect the value in the parent as 
well. 


Props as Array 


In the contact-details. js file we have defined props:['phone', 'email'] aS an alfay, which is fine if 
we do not want fine grained control with props. 
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Props as Object 
If we want more fine grained control over props, like 


* if we want to define what type of values are acceptable as the prop 
¢ what should be a default value for the prop 
¢ whether a value is MUST (required) to be passed for the prop or is it optional 


then we need to use object notation for defining the props, as we have done in adaress. js. 


If we are authoring reusable components which may be used by other developers on the team as 
well, then it is a good practice to define props as objects so that anyone using the component has 
a clear idea of what should be the type of data and whether it is compulsory or optional. 


It is also referred to as props validation. The type can be any one of the following native 
constructors: 


* String 

¢ Number 

¢ Boolean 

¢ Array 

* Object 

¢ Function 

* or a Custom Constructor 


Some examples of prop validation as taken from htip://vuejs.org/guide/components.html#Props 


Vue.component('example', { 
DEQOS tan 

// basic type check (*null* means accept any type) 

propA: Number, 

// multiple possible types (1.0.21+) 

propM: [String, Number], 

// a required string 

PEORBEI 
type: String, 


required: true 
}, 
// a number with default value 
prope? { 

type: Number, 

default: 100 
}, 
// object/array defaults should be returned from a 
// factory function 
PEOpD: { 

type: Object, 

default: function () { 

return { msg: 'hello' } 

} 
}, 
// indicate this prop expects a two-way binding. will 
// vaise a warning if binding type does not match. 
propE: { 

twoWay: true 


https://riptutorial.com/ 56 


}, 
// custom validator function 
DECODES 

validator: function (value) { 

return value > 10 

} 
}, 
// coerce function (new in 1.0.12) 
// cast the value before setting it on the component 


propG: { 
coerce: function (val) { 
return val + '' // cast the value to string 
} 
}, 
PEODHE 


CGOSECGSS Gulncieioim (Ayal) { 
return JSON.parse(val) // cast the value to Object 


}); 


camelCase vs kebab-case 


HTML attributes are case-insensitive, which means it cannot differentiate between adaresstype and 


addressType, SO when using camelCase prop names as attributes we need to use their kebab- 
case(hyphen-delimited) equivalents: 
addressType should be written as address-type in HTML attribute. 


Dynamic Props 


Just as you're able to bind data from a view to the model, you can also bind props using the same 


v-bind directive for passing information from parent to child components. 
JS 


new Vue ({ 
el: '#example', 
data: { 
msg: ‘hello world' 


Vue.component ('child', { 
props: ['myMessage'], 
template: '<span>{{ myMessage }}</span> 


HTML 


<div id="example"> 
<input v-model="msg" /> 
<child v-bind:my-—message="msg"></child> 
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<!-—- Shorthand ... <child :my-message="msg"></child> -—> 
</div> 


Result 


hello world 


Passing Props While Using Vue JSX 


We have a parent component: Importing a child component in it we'll pass props via an attribute. 


Here the attribute is 'src' and we're passing the 'src' too. 


ParentComponent.js 


import ChildComponent from './ChildComponent'; 
export default { 
render(h, {props}) { 
const sre = ‘https://cdn-images-1.medium.com/max/800/1*AxRXW2 j8qmGJixlYg7n6uw. jpeg'; 
return ( 
<ChildComponent src={src} /> 
i 


hi 


And a child component, where we need to pass props. We need to specify which props we are 
passing. 


ChildComponent.js: 


export default { 


PEOPS ls sel ly, 
render(h, {props}) { 
reSieulisin —(( 
<a href = {props.src} download = "myimage" > 
(Clliiele telass; Ihaims 
</a> 


i 


hi 


Read Props online: https://riptutorial.com/vue-js/topic/3080/props 
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Chapter 19: Slots 


Remarks 


Important! Slots after render don't guarantee order for positions for slots. Slot, which was the first, 
may have a different position after render. 


Examples 


Using Single Slots 


Single slots are used when a child component only defines one sioct within its template. The page 
component above uses a single slot to distribute content. 


An example of the page component's template using a single slot is below: 


<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 
<slot> 
This will only be displayed if there is no content 
to be distributed. 
</slot> 
</body> 
</html> 


To illustrate how the slot works we can set up a page as follows. 


<page> 
<p>This content will be displayed within the page component</p> 
</page> 


The end result will be: 


<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 
<p>This content will be displayed within the page component</p> 
</body> 
</html> 


If we didn't put anything between the page tags an instead had <page></page> we would instead 
yield the following result since there is default content between the sict tags in the page 
component template. 
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<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 


This will only be displayed if there is no content 
to be distributed. 
</body> 
</html> 


What are slots? 


Slots offer a convenient way of distributing content from a parent component to a child component. 
This content can be anything from text, HTML or even other components. 


It can be helpful sometimes to think of slots as a means of injecting content directly into a child 
component's template. 


Slots are especially useful when the component composition underneath the parent component 
isn't always the same. 


Take the following example where we have a page component. The content of the page could 
change based on whether that page displays e.g. an article, blog post or form. 


Article 


<page> 
<article></article> 
<comment s></comments> 
</page> 


Blog Post 


<page> 
<blog-post></blog-post> 
<comment s></comments> 
</page> 


Form 


<page> 
<form></form> 


</page> 


Notice how the content of the page component can change. If we didn't use slots this would be 
more difficult as the inner part of the template would be fixed. 


Remember: "Everything in the parent template is compiled in parent scope; everything in the child 
template is compiled in child scope." 


Using Named Slots 
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Named slots work similarly to single slots but instead allow you to distribute content to different 
regions within your child component template. 


Take the page component from the previous example but modify it's template so it is as follows: 


<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 
<aside> 
<slot name="sidebar"></slot> 
</aside> 
<main> 
<slot name="content"></slot> 
</main> 
</body> 
</html> 


When using the page Component we can now determine where content is placed via the siot 
attribute: 


<page> 
<p slot="sidebar">This is sidebar content.</p> 
<article slot="content"></article> 

</page> 


The resulting page will be: 


<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 


<aside> 


<p>This is sidebar content.</p> 
</aside> 
<main> 
<article></article> 
</main> 
</body> 
</html> 


If a siot is defined without a name attribute then any content which is placed within component tags 
not specifying a sict attribute will be placed into that slot. 


See the multi insertion example on the Vue.js official docs. 
Using Slots in Vue JSX with 'babel-plugin-transform-vue-jsx' 
If you're Using VueJS2 and like to use JSX along with it. In this case,to use the slot, the solution 


with example is below.We have to usé this.$slots.default It's almost like this.props.children in 
React JS. 
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Component.js : 


export default { 
render(h) { //eslint-disable-line 
return ( 
<ibal 
{ this.$slots.default } 
=<) allsI 


i 


}; 
ParentComponent.js 


import Component from './Component'; 


export default { 
render(h) { //eslint-disable-lin 

TeSicuusin — (( 

<ul> 


<Component> 
Hello World 
</Component> 
</ul> 


); 


hi 


Read Slots online: https://riptutorial.com/vue-js/topic/4484/slots 
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Chapter 20: The array change detection 
caveats 


Introduction 


When you try to set a value of an item at a particular index of an array initialized in the data option, 
vue can't detect the change and does not trigger an update to the state. In order to overcome this 
caveat you should either use vue's Vue.$set or use Array.prototype.splice method 


Examples 


Using Vue.$set 


In your method or any lifecycle hook that changes the array item at particuar index 


new Vue ({ 
el: ‘#app', 
data: { 
myArr : ['apple', ‘'orange', 'banana', 'grapes"] 
}, 
methods: { 
changeArraylItem: function() { 
//this will not work 
//myArr[2] = 'strawberry'; 


//Vue.$set (array, index, newValue) 
ube» Sees (iclals smyyMee, 2, Vcheieayoreiereye!)) 9 


}) 
Here is the link to the fiddle 
Using Array.prototype.splice 


You can perform the same change instead of using vue.$set by using the Array prototype's 
splice () 


new Vue ({ 
el: '#app', 
data: { 
myArr : ['apple', ‘orange', ‘banana', 'grapes'] 
}, 
methods: { 
changeArraylItem: function() { 
//this will not work 
//myArr[2] = 'strawberry'; 


//Array.splice (index, 1, newValue) 
this.myArr.splice(2, 1, '‘strawberry'); 
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For nested array 


If yoi have nested array, the following can be done 


new Vue ({ 
el: '#app', 
data: { 
myArr : [ 
['apple', 'banana'], 
['grapes', 'orange'"] 
] 
}, 
methods: { 


changeArraylItem: function() { 
this.$set(this.myArr[1], 1, 'strawberry'); 
} 


}) 
Here is the link to the jsfiddle 


Array of objects containing arrays 


new Vue({ 
el: '#app', 
data: { 
myArr : [ 
name: ‘object-l1', 
nestedArr: ['apple', ‘'banana'] 
, 
name: 'object-2', 
nestedArr: ['grapes', ‘orange'] 
] 
}, 
methods: 


changeArraylItem: function() { 
this.$set(this.myArr[1].nestedArr, 1, 'strawberry'); 
} 


}) 


Here is the link to the fiddle 


Read The array change detection caveats online: https://riptutorial.com/vue-js/topic/10679/the- 
array-change-detection-caveats 
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Chapter 21: Using "this" in Vue 


Introduction 


One of the most common errors we find in Vue code on StackOverflow is the misuse of this. The 
most common mistakes fall generally in two areas, using this in callbacks for promises or other 
asynchronous functions and using arrow functions to define methods, computed properties, etc. 


Examples 


WRONG! Using "this" in a callback inside a Vue method. 


new Vue ({ 
el:"#app", 
data: { 
EOOR oes 
}, 
methods: { 
doSomethingAsynchronous() { 
setTimeout (function () { 
// This is wrong! Inside this function, 
// “this" refers to the window object. 
elms}. Foe = Woes 
ky LOO) g 


} 
}) 


WRONG! Using "this" inside a promise. 


new Vue ({ 
el:"#star-—wars—people", 
data: { 
people: null 
Ie 
mounted: function() { 
$.getJSON("http://swapi.co/api/people/", function (data) { 
// Again, this is wrong! "this", here, refers to the window. 
this.people = data.results; 
}) 


RIGHT! Use a closure to capture "this" 
You can capture the correct this using a closure. 


new Vue({ 
el:"#star-wars—people", 
data: { 
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people: null 
}, 
mounted: function() { 
// Before executing the web service call, save this to a local variable 
var self = this; 
S$. getJSON("http://swapi.co/api/people/", function (data) { 
// Inside this call back, because of the closure, self will 
// be accessible and refers to the Vue object. 


self.people = data.results; 


}) 


RIGHT! Use bind. 
You can bind the callback function. 


new Vue ({ 
el:"#star-wars—people", 
data: { 
people: null 
}, 
mounted: function () { 
$.getJSON ("http://swapi.co/api/people/", function (data) { 
this.people = data.results; 
}\ 5 lovakiqveli (ie laal 3) }) 9 


RIGHT! Use an arrow function. 


new Vue({ 
el:"#star-—wars—people", 
data: { 
people: null 
}, 
mounted: function() { 
S.getJSON ("http://swapi.co/api/people/", data => this.people = data.results); 
} 
}) 


Caution! Arrow functions are a syntax introduced in Ecmascript 2015. It is not yet supported but 
all modern browsers, so only use it if you are targetting a browser you know supports it, or if you 
are compiling your javascript down to ES5 syntax using something like babel. 


WRONG! Using an arrow function to define a method that refers to "this" 


new Vue ({ 
el:"#app", 
data: { 
EOOR Moves’ 
}, 
methods: { 
// This is wrong! Arrow functions capture "this" lexically 
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// and "this" will refer to the window. 
doSomething: () => this.foo = "baz" 
} 
}) 


RIGHT! Define methods with the typical function syntax 


new Vue ({ 
el:"#app", 
data: { 
EOOR Moves’ 


}, 


methods: { 
doSomething: function () { 
this.foo = "baz" 


} 
} 
}) 


Alternatively, if you are using a javascript compiler or a browser that supports Ecmascript 2015 


new Vue({ 
el:"#app", 
data: { 
icomOR “lowe 
}, 
methods: { 
doSomething() { 
ieALS FCO = Weer 
} 
} 
}) 


Read Using "this" in Vue online: https://riptutorial.com/vue-js/topic/9350/using--this--in-vue 
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Chapter 22: Vue single file components 


Introduction 


Describe how to create single file components in a .vue file. 


Specially the design decisions that can be made. 
Examples 
Sample .vue component file 


<template> 
<div class="nice">Component {{title}}</div> 
</template> 


<script> 
export default { 
data() { 
return { 
title: "awesome!" 
}; 
} 
} 


</ seiele> 


<style> 

-nice { 
background-color: red; 
font-size: 48px; 

} 

</style> 


Read Vue single file components online: https://riptutorial.com/vue-js/topic/1 01 18/vue-single-file- 
components 
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Chapter 23: VueJS + Redux with Vua-Redux 
(Best Solution) 


Examples 


How to use Vua-Redux 


Installing Vua Redux from NPM: 


Install through: 


npm i vua-redux --save 


Initialize: 


// main.js 


import Vue from 'vue'; 

import { reduxStorePlugin } from 'vua-redux'; 
import AppStore from './AppStore'; 

import App from './Component/App'; 


// install vua-redux 
Vue.use(reduxStorePlugin) ; 


new Vue ({ 
store: AppStore, 
render(h) { 


return <App /> 


}); 
// AppStore.js 


import { createStore } from 'redux'; 


const initialState = { 
icocoss [|| 
hi 


const reducer = (state = initialState, action) => { 
switch (action.type) { 
case 'ADD_TODO': 
return { 
66 oSIESES 
iPKOCOSS [so cSiEate coclos, aicitiLom claice, coco || 
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default: 
PTeCurn state, 


const AppStore = createStore (reducer) ; 


export default AppStore; 


Use in your component : 


// components/App.js 


import { connect } from 'vua-redux'; 


const App = { 
props: ['some-prop', ‘another-prop'], 


[** 
* everything you do with vue component props 
* you can do inside collect key 


a, 
collect: { 
bodoss 4 
type: Array, 
}, 
addTodo: { 
type: Function, 
}, 
}, 
methods: { 


handleAddTodo() { 
const todo = this.Srefs.input.value; 
this.addTodo (todo) ; 


hy 


render(h) { 
return <div> 
<ul> 
{this.todos.map(todo => <li>{todo}</1i>) } 
</ul> 


<div> 
<input type="text" ref="input" /> 
<button on-click={this.handleAddTodo}>add todo</button> 
</div> 
</div> 


}; 
function mapStateAsProps(state) { 
return { 


todos: state.todos 


}; 


function mapActionsAsProps (dispatch) { 
return { 


https://riptutorial.com/ 


70 


addTodo(todo) { 
dispatch ({ 
type: 'ADD_TODO', 
Catas { Code | 


} 


export default connect (mapStateAsProps, mapActionsAsProps) (App) ; 


Read VueJS + Redux with Vua-Redux (Best Solution) online: https://riptutorial.com/vue- 
js/topic/7396/vuejs-plus-redux-with-vua-redux--best-solution- 
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Chapter 24: vue-router 


Introduction 


vue-router is the officially supported routing library for vue.js. 


Syntax 


* <router-link to="/path">Link Text</router-link> <!-- Creates a link to the route that 
matches the path > 


° <router-view></router-view> <! Outlet for the currently matched route. It's component 
will be rendered here. > 


Basic Routing 


The easiest way to get up and running with vue-router is to use the version provided via CDN. 


HTML: 


<script src="https://unpkg.com/vue/dist/vue. js"></script> 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 


<div id="router-example"> 
<router-link to="/foo">Link to Foo route</router-link> 
<router-view></router-view> 

</div> 


JavaScript (ES2015): 


const Foo = { template: <div>This is the component for the Foo route</div> } 


const router = new VueRouter ({ 
routes: [ 
{ path: '/foo', component: Foo} 


}) 


const routerExample = new Vue ({ 
POUuULer 
}) .Smount ('#router-example') 


Read vue-router online: https://riptutorial.com/vue-js/topic/9654/vue-router 
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Chapter 25: Vuex 


Introduction 


Vuex is a state management pattern + library for Vue.js applications. It serves as a centralised 
store for all the components in an application, with rules ensuring that the state can only be 
mutated in a predictable fashion. It also integrates with Vue's official dev tools extension to provide 
advanced features such as zero-config time-travel debugging and state snapshot export/import. 


Examples 


What is Vuex? 


Vuex is an official plugin for Vue.js which offers a centralised datastore for use within your 
application. It is heavily influenced by the Flux application architecture which features a 
unidirectional data flow leading to simpler application design and reasoning. 


Within a Vuex application the datastore holds all shared application state. This state is altered by 
mutations which are performed in response to an action invoking a mutation event via the 
dispatcher. 


An example of the data flow in a Vuex application is outlined in the diagram below. 
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Backend API 


Actions 


Vue Components 
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Diagram used under the WT licence, originally from the Official Vuex GitHub repo. 


Individual Vue.js application components can access the store object to retrieve data via getters, 
which are pure functions returning a read-only copy of the desired data. 


Components can have actions which are functions that perform changes to the component's own 
copy of the data, then use the dispatcher to dispatch a mutation event. This event is then handled 
by the datastore which updates the state as necessary. 


Changes are then automatically reflected throughout the application since all components are 
reactively bound to the store via their getters. 


An example illustrating the use of vuex in a vue project. 


const state = { 
lastClickTime: null 


const mutations = { 
updateLastClickTime: (state, payload) => { 
state.lastClickTime = payload 


const getters = { 
getLastClickTime: state => { 
return new Date(state.lastClickTime) 


} 


const actions = { 

syncUpdateTime: ({ commit }, payload) => { 
commit ("updateLastClickTime", payload) 

}, 

asyncUpdateTime: ({ commit }, payload) => { 
setTimeout(() => { 

commit ("updateLastClickTime", payload) 

ty, Math. random() * 5000) 


const store = new Vuex.Store ({ 
state, 
Getters, 
mutations, 
actions 
}) 
const { mapActions, mapGetters } = Vuex; 
// Vue 
const vm = new Vue ({ 
el: '#container', 
store, 
computed: { 
..-mapGetters ([ 


'getLastClickTime' 


https://riptutorial.com/ 15 


]) 
}, 
methods: { 
...mapActions ([ 
"syncUpdateTime', 
'asyncUpdateTime' 
), 


updateTimeSyncTest () { 


this.syncUpdateTime (Date.now() ) 


, 


updateTimeAsyncTest () { 


this.asyncUpdateTime (Date.now() ) 


} 
}) 


And the HTML template for the same: 


<div id="container"> 
<p>{{ getLastClickTime || "No time selected yet" }}</p> 
<button @click="updateTimeSyncTest">Synce Action test</button> 
<button @click="updateTimeAsyncTest">Asynce Action test</button> 
</div> 


1. Here the state contains lastClickTime property initialized as null. This setting up of default 
values is important to keep the properties reactive. Properties not mentioned in the state 
will be available but the changes made thereafter would not be accessible by using 
getters. 


2. The getter used, provides a computed property which will be updated each time a mutation 
updates the value of the state property. 


3. Only mutations are allowed to change the state and its properties, that said, it does so 
synchronously only. 


4. An Action can be used in case of asynchronous updates, where the API call (here mocked 
by the randomly timed setTimeout) can be made in the action, and after getting the response 
a mutation can be committed to, to make the change to the state. 


Why use Vuex? 


When building large applications such as Single Page Apps (SPA's), which typically consist of 
many reusable components they can quickly become difficult to build and maintain. The sharing of 
data and state between these components can also quickly break down and become difficult to 
debug and maintain. 


By using a centralised application data store the entire application state can be represented in one 
place making the application more organised. Through the use of a unidirectional data flow, 
mutations and by scoping component data access to only the data required it becomes much 
simpler to reason about the component role and how it should affect the application state. 


VueJS components are separate entities and they cannot share data between each other easily. 
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To share data without vuex we need to emit event with data and then listen and catch that event 
with on. 


component 1 
this.Semit ('eventWithDataObject', dataObject) 
component 2 


this.$on('eventWithDataObject', function (dataObject) { 
console.log(dataObject) 
}) 


With vuex installed we can simply access its data from any component without a need of listening 
to events. 


this.$store.state.myData 


We can also change data synchronously with mutators, use asynchronous actions and get data 
with getter functions. 


Getter functions might work as global computed functions. We can access them from components: 


this.$store.getters.myGetter 


Actions are global methods. We can dispatch them from components: 


this.$store.dispatch('myAction', myDataObject) 


And mutations are the only way to change data in vuex.We can commit changes: 


this.$store.commit ('myMutation', myDataObject) 


Vuex code would look like this 


state: { 
myData: { 
Ieesye awl 
} 
}, 
getters: { 
myGetter: state => { 
return state.myData.key.length 
} 
}, 


actions; { 
myAction ({ commit }, myDataObject) { 
setTimeout(() => { 


commit ('myMutation', myDataObject) 
}, 2000) 
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}, 
mutations: { 
myMutation (state, myDataObject) { 
state.myData = myDataObject 


} 


How to install Vuex? 


Most of the time that you'll be using Vuex will be in larger component based applications where 


you likely be using a module bundler such as Webpack or Browserify in conjunction with Vueify if 


you're using single files. 


In this case the easiest way to get Vuex is from NPM. Run the command below to install Vuex and 


save it to your application dependencies. 


npm install --save vuex 


Ensure that you load link Vuex with your Vue setup by placing the following line after your 
require('vue') statement. 


Vue.use (require ('vuex') ) 


Vuex is also available on CDN; you can grab the latest version from cdnjs here. 
Auto dismissible notifications 


This example will register an vuex module dynamically for storing custom notifications that can 
automatically dismissed 


notifications.js 


resolve vuex store and define some constants 


//Vuex store previously configured on other side 
import _store from 'path/to/store'; 


//Notification default duration in milliseconds 
const defaultDuration = 8000; 


//Valid mutation names 
const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'; 
const NOTIFICATION_DISMISSED = 'NOTIFICATION_DISMISSED'; 


set our module initial state 


const state = { 
Notifications: [] 


set our module getters 
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const getters = { 
//All notifications, we are returning only the raw notification objects 
Notifications: state => state.Notifications.map(n => n.Raw) 


set our module Actions 


const actions = { 
//On actions we receive a context object which exposes the 
//same set of methods/properties on the store instance 
// Ceca | ks) al Sinoieclieiac) iene Comessie commune, iis) aS ein 
//ES2015 feature called argument destructuring 
AGG Veommle 9) snocisslcatron)n 4 
//Get notification duration or use default duration 
let duration = notification.duration || defaultDuration 


//Create a timeout to dismiss notification 


var timeOut = setTimeout (function () { 
//On timeout mutate state to dismiss notification 
commit (NOTIFICATION_DISMISSED, notification); 

\, <«heuesic slovay)) p 


//Mutate state to add new notification, we create a new object 
//for save original raw notification object and timeout referenc 
commit (NOTIFICATION_ADDED, { 

Raw: notification, 

TimeOut: timeOut 


}) 


}, 
//Here we are using context object directly 
Dismiss(context, notification) { 


//Just pass payload 
context .commit (NOTIFICATION_DISMISSED, notification); 


set our module mutations 


const mutations = { 
//On mutations we receive current state and a payload 
[NOTIFICATION_ADDED] (state, notification) { 
state.Notifications.push (notification) ; 


}, 
//cemember, current state and payload 
[NOTIFICATION _DISMISSED] (state, rawNotification) { 
var i = state.Notifications.map(n => n.Raw) .indexOf (rawNotification); 
aie (fl == =) { 
EOrurr, 


clearTimeout (state.Notifications[i].TimeOut) ; 
state.Notifications.splice(i, 1); 


Register our module with defined state, getters, actions and mutation 
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_store.registerModule('notifications', { 
state, 
Getters, 
AGCEROnsy 
mutations 


}); 


Usage 
componentA. vue 
This components displays all notifications as bootstrap's alerts on top right corner of screen, also 


allows to manually dismiss each notification. 


<template> 
<transition-group name="notification-list" tag="div" class="top-right"> 
<div v-for="alert in alerts" v—-bind:key="alert" class="notification alert alert-dismissible" 


v-bind:class="'alert—'talert.type"> 
<button v-on:click="dismiss(alert)" type="button" class="clos 
aria-hidden="true">étimes; </span></button> 
<div> 
<div> 
<strong>{{alert.title}}</strong> 
</div> 
<div> 
{{alert.text}} 
</div> 
</div> 
</div> 
</transition-group> 
</template> 


" aria-label="Close"><span 


sere aloe > 
export default { 
name: ‘'arc-notifications', 
computed: { 
alerts() { 
//Get all notifications from store 
return this.$store.getters.Notifications; 


} 
}, 
methods: { 
//Manually dismiss a notification 
dismiss(alert) { 
this.$store.dispatch('Dismiss', alert); 


} 

<i Mereajoie > 

<style lang="scss" scoped> 
Smargin: 15px; 


SECS Me | 
top: $margin; 
right: $margin; 
HERES GiwIEOP 
WOLCheElng Sl0Ojor<s 
//hneight: 600px; 
position: absolute; 
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Cpaciievs O.95, 
z-index: 100; 
display: flex; 
flex—-wrap: wrap; 
//background-color: red; 
} 
SIMONE AE ALeyene aoa, ff 
transition: all 0.8s; 
display: flex; 
width: 100%; 
position: relative; 
margin-bottom: 10px; 
-close { 
position: absolute; 
iaskejae 8 ILijosep 
ECS Dijoex<p 


> chiy i 
position: relative; 
display: inline; 


} 

oimolealiraL@ sie aloins llasic—elmiilicl 4 
margin-bottom: 0; 

} 


5 MOLE ALIE LOS oin— Lal Ste Sime Sie, 


-notification-list-—leave-active { 
Cjocestieyy7s 0p 
transform: translateX(-90px) ; 
} 


-notification-list-—leave-active { 


position: absolute; 


} 
</style> 


Snippet for add notification in any other component 


//payload could be anything, this example content matches with componentA.vue 
this.$store.dispatch('Add', { 


title = 'Hello', 
text = 'World', 
type = 'info', 


duration = 15000 
}); 


Read Vuex online: https://riptutorial.com/vue-js/topic/3430/vuex 
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Chapter 26: Watchers 


Examples 


How it works 


You can watch data property of any Vue instance. When watching a property, you trigger a 
method on change: 


export default { 
Cata () { 
Teeuwen {[ 
watched: 'Hello World' 


}, 
watch: { 
"'watched' () { 
console.log('The watched property has changed") 


You can retrieve the old value and the new one: 


export default { 
data () f{ 
return { 
watched: 'Hello World' 


}, 
watch: { 
"watched' (value, oldValue) { 
console.log(oldValue) // Hello World 
console.log(value) // ByeBye World 


}, 
mounted () {f 
this.watched = 'ByeBye World' 


If you need to watch nested properties on an object, you will need to use the deep property: 


export default { 
Gleec: (()) 
return { 
someObject: { 
message: 'Hello World' 


} 


}, 
watch: { 
"someObject': { 
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deep: true, 
handler (value, oldValue) { 


console.log('Something changed in someObject') 


When is the data updated? 


If you need to trigger the watcher before making some new changes to an object, you need to use 
the next Tick () method: 


export default { 


data() { 
return { 
OOS Visgue! , 
message: 'from data' 
} 
}, 
methods: { 
eveicaeim (()) { 
this.foo = 'changed' 
// If you juste this.message = 'from method' here, the watcher is executed after. 
this.$nextTick(() => { 
this.message = 'from method' 
}) 
} 
}, 
watch: { 
OO ()) if 
this.message = 'from watcher' 


Read Watchers online: https://riptutorial.com/vue-js/topic/7988/watchers 
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